<template>
  <div style="height:100%;" class="bg">
    <div class="bgg">
      <div class="topTop"><div class="topFont">扫码</div></div>
      <div class="contentBoxs">
        <div class="maDiv">
          <i class="iconfont icon-saoma1" />
        </div>
        <ul>
          <li v-for="item in menuListShow" :key="item.id">
            <div @click="clickMenu(item)">
              <em v-show="item.markNum > 0">{{ item.markNum }}</em>
              <b>
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="item.icon" />
                </svg>
              </b>
              <span>{{ item.name }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Saoma',
  data () {
    return {
      menuListShow: [],
      menuList: [
        {
          id: 1,
          name: '首检',
          icon: '#icon-saomashoumojian',
          href: './firstInspection',
          markNum: ''
        },
        {
          id: 2,
          name: '巡检',
          icon: '#icon-xunjiansaoma',
          href: './processInspection',
          markNum: ''
        },
        {
          id: 3,
          name: '工序检',
          icon: '#icon-gongxujiansaoma',
          href: './processInspection',
          markNum: ''
        },
        {
          id: 4,
          name: '成品检',
          icon: '#icon-mojianjiansaoma',
          href: './finalInspection',
          markNum: ''
        }
      ]
    }
  },
  async mounted () {
    this.getCornerMark()
  },
  methods: {
    change (row) { },
    /* 获取角标 */
    async getCornerMark () {
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner'
      })
      const res = await this.$axios.get('/dobo-product/pad/getCornerMark')
      if (res.data.code === 200) {
        setTimeout(() => {
          if (res.data.data.length > 0) {
            res.data.data.forEach(item => {
              this.menuList.forEach(itx => {
                if (itx.name === item.menu) {
                  itx.markNum = item.cornerMarkCount
                  this.menuListShow.push(itx)
                }
              })
            })
          } else {
            this.menuListShow = this.menuList
          }
          toast.clear()
        }, 10)
      }
    },
    clickMenu (row) {
      this.$router.push(`/saomaShow?name=${row.name}`)
    }

  }
}
</script>

<style lang='scss' scoped>
.bg{
  background: linear-gradient(to top right, #022566, #1CACFF);
}
.bgg{
  height: 90vh;
  padding-top:10vh;
}
.topTop{
  width: 100%;
  height: 70px;
  padding: 0 40px;
  .topFont{
    height: 70px;
    line-height: 70px;
    background: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom:1px solid #ccc;
    font-size: 28px;
    text-align: center;
  }
}
.contentBoxs{
  width: 100vw;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .maDiv{
    width: 250px;
    height: 250px;
    line-height: 250px;
    border-radius: 250px;
    border: 1px solid #ccc;
    position: absolute;
    background: #fff;
    text-align: center;
    i{
      font-size: 90px;
      background: -webkit-linear-gradient(#022566, #1CACFF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  ul{
    width: 100vw;
    height:auto;
    background: #fff;
    overflow: hidden;
    // border-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    li{
      width: 50%;
      float: left;
      height: 250px;
      font-size: 28px;
      div{
        height: 100%;
        color: #022566;
        width: 100%;
        position: relative;
        em{
            position: absolute;
            display: inline-block;
            right: 120px;
            top: 40px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: red;
            text-align: center;
            color: #fff;
            border-radius: 30px;
            font-size: 14px;
            font-style: normal;
        }
        b{
          width: 100%;
          padding-top:80px;
          text-align: center;
          display: block;
          .icon{
            width: 50px;
            height: 50px;
          }
        }
        span{
          width: 100%;
          display: block;
          text-align: center;
          text-shadow: 2px 2px 5px #ccc;
        }
      }
    }
    li:nth-child(1){
        div{
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
        }
    }
    li:nth-child(2){
        div{
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
        }
    }
    li:nth-child(3){
        div{
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
        }
    }
    li:nth-child(4){
        div{
          border-right: 1px solid #ccc;
        }
    }
  }
}
</style>
